<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ajax upload</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
</head>

<body>

    <p>jQuery+jQuery方式的ajax上传提交</p>
    <!-- 包含上传文件的必要参数 enctyoe -->
    {% csrf_token %}
    <input id="Upfile" type="file" multiple="multiple">
    <a id="FileSub">提交</a>

    <script>
        var token = $('input[name=csrfmiddlewaretoken]').val();

        $("#FileSub").click(function () {
            var f_obj = $("#Upfile").get(0).files[0]; // 获取上传文件信息
            console.log("文件对象：", f_obj);
            console.log("文件名称是：", f_obj.name);
            console.log("文件大小是：", f_obj.size);

            var data = new FormData(); // 创建formdata对象，便于将文件传输到后端
            data.append("file", f_obj); // 在formdata对象中添加(封装)文件对象
            data.append('csrfmiddlewaretoken', token); // 在Django中使用ajax post向后台传送数据时会出现403 Forbidden (CSRF token missing or incorrect.): 的报错，解决方法。

            $.ajax({
                url: '/ajaxTest/jq_upload/',
                type: 'POST',
                data: data,
                cache: false, // 上传文件无需缓存
                processData: false, // 不对数据做序列化操作
                contentType: false, // 不定义特殊连接类型
                success: function (arg) {
                    alert("文件已经上传成功，点击确定刷新页面");
                    location.reload();
                }
            })
        });
    </script>
</body>

</html>